<template>
  <div class="circulate-configuration">
    <je-form-item
      :label="$t('CirculateConfiguration.circulated')"
      style="margin-top: 16px"
      name="enable"
    >
      <je-switch v-model:value="formState.enable" mode="checkbox" />
      <span class="prompt">{{ $t('CirculateConfiguration.circulatedContext') }}</span>
    </je-form-item>

    <je-form-item
      :label="$t('CirculateConfiguration.autoCirculated')"
      style="margin-top: 6px"
      name="auto"
    >
      <je-switch v-model:value="formState.auto" mode="checkbox" />
      <span class="prompt">{{ $t('CirculateConfiguration.autoCirculatedContext') }}</span>
    </je-form-item>

    <div class="title">{{ $t('CirculateConfiguration.context') }}</div>

    <je-grid
      ref="grid"
      border
      auto-resize
      show-overflow="ellipsis"
      keep-source
      show-header-overflow
      resizable
      class="circulate-configuration-grid"
      height="300"
      size="mini"
      header-align="center"
      :edit-config="{
        trigger: 'click',
        mode: 'cell',
        showStatus: true,
        showInsertStatus: false,
      }"
      :store="gridStore"
    >
      <je-column width="40" align="center">
        <template #header>
          <i style="font-size: 16px; cursor: pointer" class="fal fa-plus" @click="addColumn"></i>
        </template>
        <template #default="{ row }">
          <i
            style="font-size: 16px; cursor: pointer"
            class="fal fa-times"
            @click="deleteColumn(row)"
          ></i>
        </template>
      </je-column>
      <je-column
        field="ruleName"
        :title="$t('CirculateConfiguration.rule')"
        width="140"
        :edit-render="inputRender"
      >
        <template #edit="{ row }">
          <je-select
            v-model:value="row.ruleCode"
            :get-popup-container="getPopupContainer"
            placeholder="请选择"
            config-info="JE_ROUNDTYPE,ruleName~ruleCode,text~code,S"
            @change="cleanData(row)"
          />
        </template>
      </je-column>
      <je-column
        field="name"
        :title="$t('CirculateConfiguration.ruleConfig')"
        :edit-render="inputRender"
      >
        <template #edit="{ row }">
          <je-select-tree
            v-if="['departmentConfig', 'roleConfig'].indexOf(row.ruleCode) != -1"
            v-model:value="row.name"
            placeholder="请选择"
            :select-options="{
              title: getTitle(row.ruleCode),
              selectExp: getSelectExp(row.ruleCode),
            }"
            :config-info="getConfigInfo(row)"
          />
          <je-select-user
            v-if="['userConfig'].indexOf(row.ruleCode) != -1"
            v-model:value="row.name"
            placeholder="请选择"
            :select-options="{ title: getTitle(row.ruleCode) }"
            config-info="JE_RBAC_VDEPTUSER,passRoundId~name,id~text,M"
          />
          <je-select-grid
            v-if="['formFieldConfig'].indexOf(row.ruleCode) != -1"
            v-model:value="row.name"
            placeholder="请选择"
            :select-options="{ title: getTitle(row.ruleCode) }"
            config-info="JE_CORE_RESOURCEFIELD,passRoundId~name,RESOURCEFIELD_CODE~RESOURCEFIELD_NAME,M"
            :querys="[
              { code: 'RESOURCEFIELD_FUNCINFO_ID', type: '=', value: funcInfo.funcId, cn: 'and' },
              {
                code: 'RESOURCEFIELD_XTYPE',
                type: 'notIn',
                value: ['fieldset', 'child', 'childfuncfield', 'displayfield'],
                cn: 'and',
              },
            ]"
          />
          <je-input
            v-else-if="['customConfig'].indexOf(row.ruleCode) != -1"
            v-model:value.trim="row.name"
            placeholder="请选择"
            readonly
            @change="cleanData(row)"
          >
            <template #suffix>
              <i style="cursor: pointer" class="fas fa-list-ul" @click="handlerModal(row)"></i>
            </template>
          </je-input>
          <span
            v-else-if="['customerDepartmentConfig', 'starterUser'].indexOf(row.ruleCode) != -1"
            style="color: #bfbfbf; margin: 0 10px"
            >无需配置</span
          >
        </template>
        <template #default="{ row }">
          <span
            v-if="['customerDepartmentConfig', 'starterUser'].indexOf(row.ruleCode) != -1"
            style="color: #bfbfbf"
            >无需配置</span
          >
          <sapn v-else>{{ row.name }}</sapn>
        </template>
      </je-column>
    </je-grid>
  </div>
  <ServeConfiguration
    v-if="serveConfiguration"
    :checked-row="checkedRow"
    @closeModal="closeModal"
  />
</template>

<script>
  import { defineComponent, ref, watch } from 'vue';
  import { Grid, Select, Form, InputSelect, Data, Switch } from '@jecloud/ui';
  import { isNotEmpty } from '@jecloud/utils';
  import { inputRender } from '@/helper/edit-render';
  import ServeConfiguration from './modal/serve-configuration.vue';

  export default defineComponent({
    name: 'CirculateConfiguration',
    components: {
      JeGrid: Grid,
      JeColumn: Grid.Column,
      JeSelect: Select,
      JeFormItem: Form.Item,
      JeSelectTree: InputSelect.Tree,
      JeSelectGrid: InputSelect.Grid,
      JeSelectUser: InputSelect.User,
      ServeConfiguration,
      JeSwitch: Switch,
    },
    props: {
      passRoundConfig: {
        type: Object,
        default: () => {
          return {};
        },
      },
      nodeId: {
        type: String,
        default: '',
      },
      funcInfo: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },
    setup(props) {
      const grid = ref(null);
      const formState = ref(props.passRoundConfig);

      //列表的数据源store
      const gridStore = Data.Store.useGridStore({
        data: props.passRoundConfig.circulationRules,
      });

      //监听节点Id变化重置数据
      watch(
        () => props.nodeId,
        () => {
          gridStore.loadData(props.passRoundConfig.circulationRules);
          formState.value = props.passRoundConfig;
        },
        { immediate: true },
      );

      //添加列
      const addColumn = () => {
        const data = {
          ruleCode: '',
          ruleName: '',
          passRoundId: '',
          name: '',
          methodName: '',
          resourceName: '',
        };
        gridStore.insert(data, -1);
      };

      //删除列
      const deleteColumn = (row) => {
        gridStore.remove(row);
      };

      //监听列表数据给主数据赋值
      watch(
        () => gridStore.data,
        (newVal) => {
          const datas = [];
          newVal.forEach((item) => {
            if (isNotEmpty(item.ruleName)) {
              datas.push(item);
            }
          });
          formState.value.circulationRules = datas;
        },
        { deep: true },
      );

      //获得树形选择的configInfo
      const getConfigInfo = (row) => {
        let config = '';

        if (row.ruleCode == 'departmentConfig') {
          config = 'JE_RBAC_DEPTTREE,passRoundId~name,id~text,M';
        } else if (row.ruleCode == 'roleConfig') {
          config = 'JE_RBAC_ROLETREE,passRoundId~name,id~text,M';
        } else if (row.ruleCode == 'userConfig') {
          config = 'JE_RBAC_VDEPTUSER,passRoundId~name,JE_RBAC_DEPTUSER_ID~USER_NAME,M';
        }
        return config;
      };

      //点击icon弹出弹窗
      const checkedRow = ref({});
      const serveConfiguration = ref(false);
      const handlerModal = (row) => {
        checkedRow.value = row;
        serveConfiguration.value = true;
      };
      const closeModal = () => {
        serveConfiguration.value = false;
      };

      //清除数据
      const cleanData = (row) => {
        row.passRoundId = '';
        row.name = '';
        row.resourceName = '';
        row.methodName = '';
      };

      //获得窗体的title
      const getTitle = (type) => {
        let title = '';
        if (type == 'departmentConfig') {
          title = '选择部门';
        } else if (type == 'roleConfig') {
          title = '选择角色';
        } else if (type == 'userConfig') {
          title = '选择人员';
        } else if (type == 'formFieldConfig') {
          title = '选择字段';
        }
        return title;
      };

      const getSelectExp = (type) => {
        let exp = '';
        if (type == 'ROLE') {
          exp = "'{nodeInfoType}' != 'folder'";
        }
        return exp;
      };

      const getPopupContainer = () => {
        return document.body;
      };

      return {
        cleanData,
        gridStore,
        formState,
        addColumn,
        deleteColumn,
        inputRender,
        grid,
        getConfigInfo,
        serveConfiguration,
        checkedRow,
        handlerModal,
        getTitle,
        closeModal,
        getSelectExp,
        getPopupContainer,
      };
    },
  });
</script>

<style lang="less" scoped>
  .circulate-configuration {
    .title {
      height: 32px;
      line-height: 32px;
      text-align: center;
      background: #f0f4f9;
      border-top: 1px solid #e6e6e6;
    }
  }
</style>

<style lang="less">
  .circulate-configuration {
    .circulate-configuration-grid {
      .vxe-table--render-default .vxe-table--border-line {
        border-left: 0 !important;
        border-bottom: 0 !important;
      }
    }
  }
</style>
